<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分请求类型判断</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <input id="text" type="text" name="text">
    <input id="submit" type="submit" value="提交">
    <script>
        function toStr(obj) {
            var arr = [];
            obj.random = Math.random();
            for (let key in obj) {
                arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
            }
            return arr.join("&");
        }

        /**
         * @method ajax
         * @description 使用Ajax向服务器发送请求
         * @param {String} type 请求类型
         * @param {String} url 请求地址
         * @param {Object} data 发送的数据
         * @param {Number} timeout 请求超时的时间
         * @param {Function} success 请求成功执行的函数
         * @param {Function} error 请求失败执行的函数
         * @return {undefined} undefined
         */
        function ajax(type, url, data, timeout, success, error) {
            var xhr;
            var timer;
            var str = toStr(data);
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (type === "GET") {
                xhr.open(type, url + "?" + str, true);
                xhr.send();
            } else if (type === "POST") {
                xhr.open(type, url, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(str);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        success(xhr);
                    } else {
                        error(xhr);
                    }
                }
            }
            // 设置请求超时的提示
            if (timeout) {
                timer = setInterval(function () {
                    console.log("请求超时");
                    xhr.abort();
                    clearInterval(timer);
            }, timeout);
            }
        }

        window.onload = function () {
            var text = document.querySelector("#text");
            var submit = document.querySelector("#submit");
            submit.onclick = function () {
                ajax("POST", "7-类型封装.php", {"text": text.value}, 3000, function (xhr) {
                    alert(xhr.responseText);
                }, function (xhr) {
                    console.log("请求失败" + xhr);
                })
            }
        }
    </script>
</body>

</html>